<div class="sidebar-wrapper">
  <div class="logo">
    <a href="#" class="simple-text">
      <div class="logo-img">
        <img src="/images/angular2-logo.png" alt="">
      </div>
      Work Admin
    </a>
  </div>
  <perfect-scrollbar class="scroller" wheel-propagation="true" wheel-speed="10" min-scrollbar-length="20">
  
  <ul class="nav" >
    <li ng-show="isNotMobileMenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="ti-panel"></i>
        <p>Stats</p>
      </a>
    </li>
    <li class="dropdown" ng-if="isNotMobileMenu">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">
        <i class="ti-bell"></i>
        <p class="notification">5</p>
        <p>Notifications</p>
        <b class="caret"></b>
      </a>
      <ul class="dropdown-menu">
        <li><a href="#">Notification 1</a></li>
        <li><a href="#">Notification 2</a></li>
        <li><a href="#">Notification 3</a></li>
        <li><a href="#">Notification 4</a></li>
        <li><a href="#">Another notification</a></li>
      </ul>
    </li>
    <li ng-if="isNotMobileMenu">
      <a href="#">
    	<i class="ti-settings"></i>
    	<p>Settings</p>
      </a>
    </li>
    <li class="divider" ng-if="isNotMobileMenu"></li>
    <li ng-repeat="menuItem in menuItems" ng-class="{'active':$state.includes(menuItem.path)}">
      <a ui-sref="{{menuItem.path}}" ng-if="!menuItem.children">
        <i class="{{menuItem.icon}}"></i>
        <p>{{menuItem.title}}</p>
      </a>
      
       <a href="javascript:void(0);" data-toggle="collapse" data-target="{{'#'+menuItem.path}}"  ng-if="menuItem.children">
        <i class="{{menuItem.icon}}"></i>
        <p>{{menuItem.title}}<b class="caret"></b></p>
      </a>
      
      <div class="collapse" id="{{menuItem.path}}" ng-if="menuItem.children">
        <ul class="nav child">
            <li ng-repeat="menuItemChild in menuItem.children" ui-sref-active="active" >
              <a ui-sref="{{menuItemChild.path}}">
                <i class="{{menuItemChild.icon}}"></i>
                <p>{{menuItemChild.title}}</p>
              </a>
            </li>
         </ul>
      </div>
    </li>
  </ul>
  </perfect-scrollbar>
</div>
